<template>
    <Bread>
        <BreadItem to="/">首页</BreadItem>
        <BreadItem v-if="bread && bread.parentId" :to="`/category/${bread.parentId}`">{{ bread.parentName }}</BreadItem>
        <Transition name="fade-right" mode="out-in">
            <BreadItem v-if="bread && bread.id" :key="bread.id">{{ bread.name }}</BreadItem>
        </Transition>
    </Bread>
</template>

<script setup>
import { computed } from 'vue';

    const props = defineProps({
        bread: {
            type: Object,
            default: () => {}
        }
    })

    const bread = computed(()=> {
        return props.bread
    })
</script>
<style lang='scss' scoped>
</style>